<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" 
	+ request.getServerPort() + request.getContextPath() + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑员工信息</title>
</head>
<body>
<%@ include file="../header.jsp" %>
<c:if test="${staff==null }">
<jsp:forward page="../staff.do?action=editView"></jsp:forward>
</c:if>
<form action="staff.do?action=edit" method="post" enctype="multipart/form-data">
<h1>编辑员工信息</h1>
<input type="hidden"name="id"value="${staff.id }"><br>
                    姓名：<input type="text" name="name" placeholder="请输入员工姓名"value="${staff.name }"><br>
		性别：<input type="radio" name="sex" value="男" checked>男
			  <input type="radio" name="sex" value="女">女<br>
		身份证号：<input type="text" name="idcard" placeholder="请输入身份证号"value="${staff.idcard }"><br>
		生日：<input type="date" name="birthday"value="${staff.birthday }"><br>
		部门：<select name="deptId"> </select><br>
		职位：<input type="text" name="job" placeholder="请输入员工职位"value="${staff.job }"><br>
		领导：<select name="leaderId"></select><br>
		电话：<input type="text" name="phone" placeholder="请输入员工电话"value="${staff.phone }"><br>
		邮箱：<input type="email" name="email" placeholder="请输入员工邮箱"value="${staff.email }"><br>
		工资：<input type="number" name="salary" placeholder="请输入员工工资" step="0.01"value="${staff.salary }"><br> 
		照片：<input type="file" name="photo" value ="${staff.photo }"><br>
		<input type="submit" value="提交"><br>
		<div style="color: red">${error }</div>
</form>

	<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
	
	<script type="text/javascript">
		$.ajax({
			url: 'dept.do?action=getAll',
			//data: {}, 
			type: 'get',
			dataType: 'json', // 返回数据的格式
			success: function(result) { // 此处的result就是返回的数据 json->js对象 这里的result就是js对象 这里jquery会自动将json串转成js对象
				
				var html = '<option value="">请选择部门</option>';
				
				// 请求成功
				// 遍历result数组
				$.each(result, function(index, item) {
					html += '<option value="'+item.id+'">' + item.name + '</option>';
				});
				$("select[name='deptId']").html(html);
			}, 
			error: function() {
				alert('请求失败');
			}
			
		});
		
		$("select[name='deptId']").change(function() {
			// 获取当前选中的部门的值
			var deptId = $(this).val();

			// 判断deptId非空
			// 注意：js中 if里可以不为true
			if (deptId) {
				// 选择了某一个部门
				$.ajax({
					url: 'staff.do?action=getByDeptId',
					data: {deptId: deptId},    // data的值是一个对象
					type: 'get',
					dataType: 'json',
					success: function(result) {
						var html = ''
						$.each(result, function(index, item) {
							html += '<option value="' + item.id + '">' + item.name + '</option>';
						});
						$("select[name='leaderId']").html(html);
					} , 
					error: function() {
						alert("请求失败");			
					}
				});
			} else {
				// 没有选择部门
				// 清空领导的下拉列表
				$("select[name='leaderID']").html('');
			}
		});
	
	</script>
</body>
</html>